<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息表</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            padding: 20px;
        }
        a{
            text-decoration: none;
            color: #721c24;
        }
        h1{
            text-align: center;
            color: #333;
            margin: 20px 0;
        }
        .table-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        table{
            width: 800px;
            border-collapse: collapse;
            color: #004085;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        th{
            padding: 10px;
            background: #cfe5ff;
            font-size: 20px;
            font-weight: 400;
        }
        td,th{
            border: 1px solid #b8daff;
        }
        td{
            padding: 10px;
            color: #666;
            text-align: center;
            font-size: 16px;
        }
        tbody tr{
            background: #fff;
        }
        tbody tr:hover{
            background: #e1ecf8;
        }
        .info{
            width: 900px;
            margin: 50px auto;
            text-align: center;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .info input, .info select {
            width: 80px;
            height: 27px;
            outline: none;
           border-radius: 5px;
           border: 1px solid #b8daff;
           padding-left: 5px;
           margin-right: 15px;
        }
        .info button{
            width: 60px;
            height: 27px;
            background-color: #004085;
            outline: none;
            border: 0;
            border-radius: 5px;
            color: white;
            cursor: pointer;
        }
        .info button:hover {
            background-color: #003366;
        }
        .delete-btn {
            background-color: #dc3545;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
        }
        .delete-btn:hover {
            background-color: #c82333;
        }
    </style>
</head>
<body>
    <h1>新增学员</h1>
    <form action="" class="info">
        姓名: <input type="text" class="uname" name="uname" required>
        年龄: <input type="number" class="age" name="age" min="1" max="100" required>
        性别:
        <select class="gender" name="gender" id="">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        薪资: <input type="number" class="salary" name="salary" min="0" required>
        就业城市: <select name="city" id="" class="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="赣州">赣州</option>
        </select>
        <button type="button" class="add">录入</button>
    </form>
    
    <h1>就业榜</h1>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>薪资</th>
                    <th>就业城市</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- 表格内容将通过JavaScript动态添加 -->
            </tbody>
        </table>
    </div>
    
    <script>
        // 学生数据数组
        let students = [];
        let studentId = 1;
        
        // 获取DOM元素
        const unameInput = document.querySelector('.uname');
        const ageInput = document.querySelector('.age');
        const genderSelect = document.querySelector('.gender');
        const salaryInput = document.querySelector('.salary');
        const citySelect = document.querySelector('.city');
        const addButton = document.querySelector('.add');
        const tbody = document.querySelector('tbody');
        
        // 添加学生函数
        function addStudent() {
            // 获取输入值
            const uname = unameInput.value.trim();
            const age = ageInput.value.trim();
            const gender = genderSelect.value;
            const salary = salaryInput.value.trim();
            const city = citySelect.value;
            
            // 验证输入
            if (!uname || !age || !salary) {
                alert('请填写所有字段');
                return;
            }
            
            // 创建学生对象
            const student = {
                id: studentId++,
                name: uname,
                age: parseInt(age),
                gender: gender,
                salary: parseInt(salary),
                city: city
            };
            
            // 添加到数组
            students.push(student);
            
            // 更新表格
            renderTable();
            
            // 清空表单
            unameInput.value = '';
            ageInput.value = '';
            salaryInput.value = '';
            genderSelect.value = '男';
            citySelect.value = '北京';
        }
        
        // 删除学生函数
        function deleteStudent(id) {
            students = students.filter(student => student.id !== id);
            renderTable();
        }
        
        // 渲染表格函数
        function renderTable() {
            // 清空表格
            tbody.innerHTML = '';
            
            // 添加学生行
            students.forEach(student => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${student.id}</td>
                    <td>${student.name}</td>
                    <td>${student.age}</td>
                    <td>${student.gender}</td>
                    <td>${student.salary}</td>
                    <td>${student.city}</td>
                    <td><button class="delete-btn" data-id="${student.id}">删除</button></td>
                `;
                tbody.appendChild(row);
            });
            
            // 添加删除按钮事件监听
            document.querySelectorAll('.delete-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const id = parseInt(this.getAttribute('data-id'));
                    deleteStudent(id);
                });
            });
        }
        
        // 添加事件监听
        addButton.addEventListener('click', addStudent);
        
        // 初始渲染表格
        renderTable();
    </script>
</body>
</html>